<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-20 19:00:47
 * @Description: file content
-->
<template>
  <base-layout
    :visible-sea="false"
    :visible-content="false"
    dialog-title="绩效设置"
    :dialog-visible="dialogVisible"
    @dialog-close="handleClose"
    dialogWidth="60%"
  >
    <template #dialog>
      <el-form
        :model="performanceSetting"
        :rules="rules"
        ref="fromRef"
        label-width="130px"
        class="demo-ruleForm"
        label-position="right"
        :inline="settingType === 2"
      >
        <el-row>
          <el-col>绩效设置</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-form-item label-width="0">
          <el-col :span="settingType === 1 ? 12 : 24">
            <el-form-item
              label-width="120px"
              :label="settingType === 1 ? '绩效生效日期:' : '汇总月份:'"
              prop="date"
            >
              <el-date-picker
                type="month"
                placeholder="选择生效日期"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
                v-model="performanceSetting.date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <div class="content">
          <el-form-item
            label-width="0"
            v-for="item in formColum"
            :key="item.prop"
          >
            <el-col :span="settingType === 1 ? 12 : 24">
              <el-form-item
                label-width="150px"
                :label="item.label"
                :prop="item.prop"
              >
                <el-col :span="16">
                  <el-input v-model="performanceSetting[item.prop]"></el-input>
                </el-col>
                <el-col
                  :span="4"
                  class="tip"
                >
                  <span>{{ item.unit }}</span>
                </el-col>
                <el-col
                  :span="4"
                  class="tip"
                >
                  <el-popover
                    trigger="hover"
                    width="200"
                  >
                    <div class="tip-text">
                      {{ item.tip }}
                    </div>
                    <i
                      class="el-icon-question"
                      slot="reference"
                    ></i>
                  </el-popover>
                </el-col>
              </el-form-item>
            </el-col>
          </el-form-item>
        </div>
        <el-row>
          <el-col>变更记录</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
      </el-form>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <span
            style="color:red;cursor: pointer"
            @click="handleView(row)"
          >查看</span>
        </template>
      </data-table>
      <el-row>
        <el-col>温馨提示</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <div class="explain">
        说明：本页面为绩效设置页面，包含了员工计算工资时大部分基础计算参数，如本门店的目标产值，评分预计分数
        等参数的设置。在设置每一个参数前请先了解每一个参数的作用，避免设置错误，从而导致系统计算工资业绩出现
        错误。
      </div>
      <div class="footer">
        <el-button
          type="primary"
          @click="settingSave"
        >保存绩效规则</el-button>
      </div>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import {
  getPersonnelSettingData,
  getPersonnelSettingFormColum,
  getPersonnelSettingRules,
  getPersonnelSetParam
} from '@/utils/performance'
import {
  performanceSetSave,
  performanceSetDetail,
  performanceSetPage,
  performanceSetUpdate,
  getPerformanceSet
} from '@/api/after-sale/personnel/performance'
import moment from 'moment';
import { mapGetters } from 'vuex'
export default {
  mixins: [
    baseMixin({
      findData: performanceSetPage,
      dataName: ['content', 'totalRecords'],
    })
  ],
  data() {
    return {
      // 显示/隐藏弹窗
      dialogVisible: false,
      performanceSetting: getPersonnelSettingData(),
      // 时间选择器配置
      pickerOptions: {
        // 设置禁用状态
        disabledDate(row) {
          const currentDate = new Date()
          const rowDate = new Date(row)
          return (
            rowDate.getFullYear() < currentDate.getFullYear() ||
            (rowDate.getFullYear() === currentDate.getFullYear() &&
              rowDate.getMonth() < currentDate.getMonth())
          )
        }
      },
      // 绩效设置类型（1：绩效设置；2：本月汇总）
      settingType: 1,
      notQuery: true,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    formColum() {
      return getPersonnelSettingFormColum(this.settingType)
    },
    // 验证规则
    rules() {
      return getPersonnelSettingRules(this.settingType)
    },
    // 表格配置
    tableColumnAttributes() {
      switch (this.settingType) {
        case 1:
          return [
            { name: '所属门店', value: 'storeName', type: 'text' },
            { name: '生效日期', value: 'date', type: 'text' },
            {
              name: '当前状态', value: 'date', type: 'renderHtml',
              render: (row, value) => {
                const time = new Date(value);
                const nowTime = new Date();
                if (nowTime.getFullYear() > time.getFullYear() || (nowTime.getFullYear() === time.getFullYear() && nowTime.getMonth() > time.getMonth())) {
                  return '<span style="color: red;">失效</span>';
                } else if (nowTime.getFullYear() === time.getFullYear() && nowTime.getMonth() === time.getMonth()) {
                  return '<span style="color: #67C23A;">生效</span>';
                } else {
                  return '<span style="color: #DCDFE6;">待生效</span>';
                }
              },
            },
            { name: '修改人', value: 'userName', type: 'text' },
            { name: '修改时间', value: 'updateTime', type: 'text' }
          ]
        case 2:
          return [
            { name: '所属门店', value: 'storeName', type: 'text' },
            { name: '汇总日期', value: 'date', type: 'text' },
            { name: '修改人', value: 'userName', type: 'text' },
            { name: '编辑时间', value: 'updateTime', type: 'text' }
          ]
      }
    }
  },
  methods: {
    /**
     * @description: 打开弹窗
     * @param {Number}
     * @return {viod}
     */
    open(type = 1) {
      this.settingType = type
      this.dialogVisible = true
      this.notQuery = false;
      this.setTableData();
      this.getPerformanceSet();
    },
    /**
     * @description: 关闭弹窗
     * @param {*}
     * @return {viod}
     */
    handleClose() {
      this.dialogVisible = false
      this.performanceSetting = getPersonnelSettingData()
      this.$emit('set-visible', false)
    },
    /**
     * @description: 查看
     * @param {Object} 记录信息
     * @return {viod}
     */
    handleView(row) {
      performanceSetDetail(row.id).then(res => {
        this.performanceSetting = getPersonnelSettingData(res.data)
      })
    },
    /**
     * @description: 获取设置
     * @param {*}
     * @return {*}
     */
    getPerformanceSet() {
      getPerformanceSet(moment(new Date()).format("YYYY-MM")).then(res => {
        this.performanceSetting = getPersonnelSettingData(res.data)
      })
    },
    /**
     * @description: 保存设置
     * @param {*}
     * @return {viod}
     */
    settingSave() {
      const param = getPersonnelSetParam(this.performanceSetting);
      // 总汇 true 是本月总汇 false 绩效设置 boolean
      param.confluence = this.settingType === 2
      param.userName = this.userInfo.userName
      param.storeId = this.userInfo.storeId;
      this.$refs.fromRef.validate(valid => {
        if (valid) {
          let saveRequset = () => { };
          if (param.id) {
            saveRequset = performanceSetUpdate;
          } else {
            delete param.id;
            saveRequset = performanceSetSave;
          }
          saveRequset(param).then(res => {
            let { success } = res
            if (success) {
              this.$message.success('保存成功')
              this.handleClose()
            }
          })
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
}
.content {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid rgba(187, 187, 187, 100);
  .tip {
    text-align: center;
    i {
      font-size: 24px;
    }
  }
}
.explain {
  color: #ec0000;
  font-size: 14px;
}
.tip-text {
  white-space: pre-line;
}
.footer {
  margin-top: 20px;
  text-align: right;
}
</style>
